<template>
  <div
    class="echarts-bar1-wrap"
    ref="dotLineChart"
    style="height: 100%; width: 100%;"
    @mouseover="stop"
    @mouseout="start"
  ></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartsBar1Wrap',
  /**
   * xData x坐标值
   * yData y轴坐标
   * lineColor: 折线图颜色
   * type: 图表类型
   * areaColor 渐变色---nomarl正常色, unique: 单独设置特殊色
   * color: 图例颜色
   * unit 纵轴单位
   * title: 标题
   * legend: name: 图例名称 color: 表示颜色
   * toolTip: color: 背景色;type: 种类(根据项目所需传值)
   *    */
  props: {
    xData: {
      type: Array,
      default: () => {
        return ['2017', '2018', '2019', '2020', '2021']
      }
    },
    yData: {
      type: Array,
      default: () => {
        return [
          [1, 4, 8, 3, 4],
          [1, 4, 8, 3, 4]
        ]
      }
    },
    type: {
      type: Array,
      default: () => ['bar', 'line']
    },
    // 可修改项
    lineColor: {
      type: String,
      default: 'rgba(252, 169, 62, 1)'
    },
    areaColor: {
      type: Object,
      default: () => {
        return {
          normal: [['RGBA(18, 142, 232, 1)', 'RGBA(18, 142, 232, .3)']],
          unique: [['rgba(25, 194, 147, 1)', 'rgba(25, 194, 147, .3)']]
        }
      }
    },
    color: {
      type: Array,
      default: () => ['RGBA(18, 142, 232, 1)', 'rgba(252, 169, 62, 1)']
    },
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    legend: {
      type: Array,
      default: () => ['资产数量', '同比']
    },
    toolTip: {
      type: Object,
      default: () => {
        return {
          color: ''
        }
      }
    }
  },

  data () {
    return {
      chart: null,
      option: null,
      timer: null,
      max: 0,
      min: 0,
      seriesDatas: [],
      index: 0
    }
  },

  watch: {
    // 监听index变化实现自动切换
    index: {
      handler (i) {
        if (this.xData && i < this.xData.length) {
          this.$nextTick(() => {
            this.changeAuto(i)
          })
        } else {
          this.index = 0
        }
      },
      immediate: true
    }
  },

  created () {
    // 获取最大/小值
    this.getMax()
    this.getMin()
    // 初始化图表数据
    this.seriesData()
  },

  mounted () { // 初始化图表
    this.$nextTick(() => {
      this.init()
      this.chart.resize()
    })
  },

  beforeDestroy () {
    // 销毁定时器
    clearTimeout(this.timer)
    // 销毁图表实例
    // this.chart.dispose()
  },

  methods: {
    seriesData () {
      const arr = []
      const areaColor = this.areaColor
      const color = this.color
      const that = this
      this.yData.forEach((item, i, ary) => {
        console.log(window.innerWidth / 1920)
        arr.push({
          name: this.legend[i],
          type: that.type[i],
          barWidth: 12,
          barGap: 3,
          showSymbol: true,
          symbolSize: 5,
          animationDuration: 2000,
          color: color[i],
          label: {
            show: that.type[i] === 'bar' && true,
            fontSize: 13,
            position: 'top',
            color: '#666666',
            fontFamily: 'Microsoft YaHei'
          },
          lineStyle: {
            color: this.lineColor
          },
          itemStyle: {
            normal: {
              color: function (params) {
                if (params.componentSubType === 'bar') {
                  if (params.value === that.min) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: areaColor.unique[i][0]
                      },
                      {
                        offset: 1,
                        color: areaColor.unique[i][1]
                      }
                    ])
                  } else {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: areaColor.normal[i][0]
                      },
                      {
                        offset: 1,
                        color: areaColor.normal[i][1]
                      }
                    ])
                  }
                } else {
                  return that.lineColor
                }
              }
            }
          },
          data: ary[i].map((item) => item)
        })
      })
      this.seriesDatas = arr
    },
    init () {
      this.chart = echarts.init(this.$refs.dotLineChart)
      const unit = this.unit
      this.option = {
        title: {
          text: `${this.title}`,
          x: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 13,
            fontWeight: 400,
            fontFamily: 'PingFangMedium'
          },
          textAlign: 'left'
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: 35,
          containLabel: true
        },
        legend: {
          show: true,
          x: 'center',
          textStyle: {
            fontSize: 13,
            color: '#666'
          },
          itemWidth: 16,
          itemHeight: 7
        },
        tooltip: {
          trigger: 'axis',
          borderWidth: 1,
          borderRadius: 12,
          padding: 0,
          confine: true,
          axisPointer: {
            type: 'shadow',
            lineStyle: {}
          },
          formatter: function (params, ticket, callback) {
            let res = ''
            res = `<div  style="background: linear-gradient(135deg,#EEF2F5, rgba(250,252,253,0.5));padding: 11px 16px;
                   border: 1px solid #FFFFFF;border-radius: 12px;">
                  <div style="font-size: 15px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;margin-bottom: 4px">${params[0].name
              }</div>
                  ${params
                .map((item, index) => {
                  return `
                    <div style="display: flex;justify-content: space-between">
                     <div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:8px;height:8px;background-color:${item.componentSubType === 'bar'
                      ? item.color.colorStops[0].color
                      : item.color
                    };border: 2px solid #fff"};></span><span style="font-size: 15px;font-family: Microsoft YaHei;font-weight: 400;color: #666666;">${item.seriesName
                    }</span></div>
                     <div style="margin-left: 19px"><span style="font-size: 15px;font-family: FZZhengHeiS-EB-GB;font-weight: 400;color: #666666;">${item.data
                    }</span><span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #666666;">台</span></div>
                    </div>`
                })
                .join('')}
                  </div>`
            return res
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(237, 239, 242, 1)'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {}
          },
          axisLabel: {
            fontSize: 16,
            color: '#666666',
            fontFamily: 'Microsoft YaHei'
          },
          data: this.xData
        },
        yAxis: {
          name: `${unit}`,
          type: 'value',
          // interval: this.yInterval, // 每次增加几个
          axisLabel: {
            textStyle: {
              fontSize: 16,
              color: '#666666',
              fontFamily: 'Microsoft YaHei'
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(237, 239, 242, 1)'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: this.seriesDatas
      }
      this.chart.clear(this.option)
      this.chart.setOption(this.option)
      const that = this
      window.addEventListener('resize', function () {
        that.chart.resize()
      })

      // const that = this
      // that.chart.on('mouseover', function (params) {
      //   clearTimeout(that.timer)
      // })
      // that.chart.on('mouseout', function (params) {
      //   clearTimeout(that.timer)
      //   that.changeAuto(that.index)
      // })
    },
    changeAuto (i) {
      const that = this
      that.timer = setTimeout(function () {
        if (that.index < that.xData.length) {
          that.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: that.index
          })
          that.index++
        } else {
          that.index = 0
        }
      }, 2000)
    },
    getMax () {
      const arr = this.yData[0].map((item) => item)
      let max = arr[0]
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i]
        }
      }
      this.max = max
    },
    getMin () {
      const arr = this.yData[0].map((item) => item)
      let min = arr[0]
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] < min) {
          min = arr[i]
        }
      }
      this.min = min
    },
    start () {
      this.changeAuto(this.index)
    },
    stop () {
      clearTimeout(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
